<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web Starter Kit</title>

    <!-- Add to homescreen -->
    <link rel="manifest" href="manifest.json">

    <!-- Fallback to homescreen for Chrome <39 on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Web Starter Kit">
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <meta name="theme-color" content="#3372DF">

    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <!-- Page styles -->
    <link rel="stylesheet" href="components/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="styles/main.css">
    <script>
      var docHeight = document.documentElement.clientHeight,
        docWidth = document.documentElement.clientWidth,
        html = document.getElementsByTagName("html")[0];
      var rate = docWidth / 320;
      html.style.fontSize = 100 * rate + "px";
    </script>
  </head>
  <body>
    <nav>
      <div class="navbar">
        <div class="navbar-inner">
          <i id="a2" class="back fa fa-angle-left"></i>
          <div class="title">话题</div>
          <i id="sideMenu" class="menu fa fa-bars"></i>
        </div>
      </div>
    </nav>
    <div class="view">
      <div class="qmh-header">
        <div class="logo"><img src="images/demo/003.png" alt="#"/></div>
        <div class="desc">
          <div class="name">巴塞罗娜球迷会</div>
          <p>
            <span>球迷：</span>
            <span class="num">52</span>
            <span style="margin-left: 15px;">总贴数：</span>
            <span class="num">5214564</span>
          </p>
          <div class="badge">金靴认证</div>
        </div>
      </div>

      <div class="card-wrap">
        <ul class="card">
          <li>
            <div class="fans-thumb">
              <span class="badge president"></span>
              <img src="images/demo/005.png" alt="#"/>
              <i class="sex sex-man"></i>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn">加好友</a>
          </li>
          <li>
            <div class="fans-thumb">
              <span class="badge vice-president"></span>
              <img src="images/demo/005.png" alt="#"/>
              <i class="sex sex-femen"></i>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn">加好友</a>
          </li>
          <li>
            <div class="fans-thumb">
              <span class="badge vice-president"></span>
              <img src="images/demo/005.png" alt="#"/>
              <i class="sex sex-femen"></i>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn">加好友</a>
          </li>
        </ul>
      </div>
      <div class="card-wrap">
        <ul class="card">
          <li>
            <div class="fans-thumb">
              <img src="images/demo/005.png" alt="#"/>
            </div>
            <div class="name">SKK-NO</div>
            <a id="a1" href="javascript:;" class="btn">加好友</a>
          </li>
          <li>
            <div class="fans-thumb">
              <img src="images/demo/005.png" alt="#"/>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn cancel">取消好友</a>
          </li>
          <li>
            <div class="fans-thumb">
              <img src="images/demo/005.png" alt="#"/>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn cancel">取消好友</a>
          </li>
          <li>
            <div class="fans-thumb">
              <img src="images/demo/005.png" alt="#"/>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn">加好友</a>
          </li>
          <li>
            <div class="fans-thumb">
              <img src="images/demo/005.png" alt="#"/>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn">加好友</a>
          </li>
          <li>
            <div class="fans-thumb">
              <img src="images/demo/005.png" alt="#"/>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn">加好友</a>
          </li>
          <li>
            <div class="fans-thumb">
              <img src="images/demo/005.png" alt="#"/>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn">加好友</a>
          </li>
          <li>
            <div class="fans-thumb">
              <img src="images/demo/005.png" alt="#"/>
            </div>
            <div class="name">SKK-NO</div>
            <a href="javascript:;" class="btn">加好友</a>
          </li>
        </ul>
      </div>
      <div class="load-more-block">加载更多</div>
    </div>
    <div class="toolbar">
      <a href="#" class="item active square"><i class="fa fa-home" style="margin-right: 4px;"></i>广场</a>
      <div class="item search"><i class="fa fa-search"></i></div>
      <a href="#" class="item person"><i class="fa fa-user" style="margin-right: 4px;"></i>个人</a>
    </div>

    <!-- Side Bar -->
    <div id="sideBar" class="side-bar">
      <ul>
        <li class="topic item">话题</li>
        <li class="fans item">粉丝</li>
        <li class="news item">新闻</li>
        <li class="video item">视频</li>
        <li class="pic item">图片</li>
        <li class="infos item">资料</li>
      </ul>
    </div>

    <!-- modal Panel -->
    <div id="overwriteMark"></div>

    <script src="components/zepto/zepto.js"></script>
    <script src="components/fastclick/lib/fastclick.js"></script>
    <script src="components/hammerjs/hammer.js"></script>
    <script>
      Zepto(function ($) {
        FastClick.attach(document.body);

        // tab事件
        $(".tab-block-btn-group .btn").each(function () {
          var me = $(this);
          me.on("click", function () {
            if (!me.hasClass("active")) {
              me.siblings(".active").removeClass("active");
              me.addClass("active");

              $("[data-tab-index]").hide();
              $("[data-tab-index='" + me.attr("data-tab-target") + "']").show();
            }
          });
        });

        // load more事件
        $(".load-more-block").on("click", function () {

        });

        var overwriteMark = $("#overwriteMark"),
          sideBar = $("#sideBar");
        $("#sideMenu").on("click", function () {
          $(overwriteMark).toggleClass("show");
          $(sideBar).toggleClass("show");
          $("body").toggleClass("overflow-hidden");
        });
        $("#a1").on("click", function () {
          alert("fwefewf");
        });
        $("#a2").on("click", function () {
          alert("========");
        });

      });
    </script>
  </body>
</html>
